{% extends 'templates/users/personal.html' %}
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>头像昵称</title>
{% block headjs %}
 <script src="{% static 'js/jquery.min.js' %}"></script>
    <style>
    @keyframes mymove1 {
        50%{
            transform: translateY(300px);
        }
    }
    @keyframes mymove2 {
        50%{
            transform: translateY(-300px);
        }
    }
    </style>
{% endblock %}
</head>
{% block main %}
    <div class="title">昵称头像</div>
    <div style="width: 100px;height: 400px;float: left;margin-left: 50px">
        <img src="/static/userhead/left.gif" style="height: 100px;border-radius: 0;animation-name: mymove1;animation-duration: 10s;animation-iteration-count: infinite;">
    </div>
    <div style="width: 140px; height: 140px; background-color: #bcd0c7; margin-left: 400px;margin-top: 40px;
    border: 5px solid #ff6347;">
    <img src="/{{ users.head }}" style="width: 100%;height: 100%;border-radius: 0;">
    </div>
<form method="post" enctype="multipart/form-data" action="/modify_head/" onsubmit="return xiugai();" style="float: left">
    {% csrf_token %}
    <input type="file" name="image" id="image" accept="image/*" style="margin-left: 250px;margin-top: 20px">
    <p style="margin-left: 250px"><input type="text" name="name" id="name" placeholder="请输入昵称" style="width: 140px;height: 30px;"></p>
    <p><button type="submit" style="margin-left: 250px;width: 140px;height: 40px">确认修改</button></p>
</form>
    <div style="width: 100px;height: 250px;margin-top:-100px;float: left;margin-left: 150px">
        <img src="/static/userhead/ldjj.gif" style="height: 100px;border-radius: 0;animation-name: mymove2;animation-duration: 10s;animation-iteration-count: infinite;padding-top:250px;">
    </div>
  {% endblock %}
{% block footjs %}
<script>
    function xiugai() {
        // 获取输入框的值
        var name = $('#name').val();
        var image = $('#image').val();

        if (!image) {
            alert('请上传文件');
            return false;
        }
        if (name.length < 1) {
            alert('请填写昵称');
            return false;
        }
        // 如果所有验证都通过，则允许表单提交
        return true;
    }
</script>
{% endblock %}